<template>
  <div v-if="propValue.tabIndex == 1" class="card_content flex" :style="{'box-shadow': propValue.shadow ? '0 2px 12px 0 rgb(0 0 0 / 10%)' : '',}">
    <div class="imgbox" v-if="propValue.icon" :style="{'margin-top': propValue.imgTop + 'rem','margin-left': propValue.imgLeft + 'rem',}">
      <img :src="propValue.icon" alt="" :style="{width: propValue.imgwidth + 'rem',height: propValue.imgheight + 'rem',}"/>
    </div>
    <div class="card_right" :style="{ width: propValue.icon ? '80%' : '100%' }">
      <div class="card_title" :style="{'font-size': propValue.titleSize + 'rem',color: propValue.titleColor,'margin-top': propValue.titleTop + 'rem','margin-left': propValue.titleLeft + 'rem','font-weight':propValue.titleBold}">
        {{ propValue.title }}
      </div>
      <div class="card_cont" :style="{'font-size': propValue.contentSize + 'rem',color: propValue.contentColor,
          'margin-top': propValue.contentTop + 'rem',
          'margin-left': propValue.contentLeft + 'rem',
        }"
      >
        {{ propValue.content }}
      </div>
    </div>
  </div>
<div v-else-if="propValue.tabIndex == 2" class="card_content mobile_card_content" :style="{'box-shadow': propValue.shadow ? '0 2px 12px 0 rgb(0 0 0 / 10%)' : '',}">
    <div class="imgbox" v-if="propValue.icon" :style="{'margin-top': propValue.imgTop + 'rem','margin-left': propValue.imgLeft + 'rem',}">
        <img :src="propValue.icon" alt="" :style="{width: propValue.imgwidth + 'rem',height: propValue.imgheight + 'rem',}"/>
    </div>
    <div class="card_right" :style="{ width: propValue.icon ? '80%' : '100%' }">
        <div class="card_title" :style="{'font-size': propValue.titleSize + 'rem',color: propValue.titleColor,'margin-top': propValue.titleTop + 'rem','margin-left': propValue.titleLeft + 'rem','font-weight':propValue.titleBold}">
        {{ propValue.title }}
        </div>
    <div class="card_cont" :style="{'font-size': propValue.contentSize + 'rem',color: propValue.contentColor,
        'margin-top': propValue.contentTop + 'rem',
        'margin-left': propValue.contentLeft + 'rem',
        }"
    >
        {{ propValue.content }}
    </div>
    </div>
</div>
</template>
<script>
export default {
  name: "From",
  props: {
    propValue: {
      type: Object,
      default: () => {},
    },
    swiperList: {
      type: Array,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.card_content {
  width: 100%;
}
.mobile_card_content{
  padding: 10rem;
.card_right {
  width: 100%!important;
}
}
.imgbox {
  // width: 30%;

  margin-right: 27rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.card_right {
  width: 80%;
}
.card_title {
  margin-bottom: 6rem;
}
.card_cont {
  line-height: 1.7;
}
</style>
